import React from 'react';
import {
  makeStyles,
  Button,
  Avatar,
  Badge,
  Tooltip,
} from '@fluentui/react-components';
import {
  Alert20Regular,
} from '@fluentui/react-icons';

const useStyles = makeStyles({
  topBar: {
    height: '64px',
    backgroundColor: '#FFFFFF',
    borderBottom: '1px solid #E5E6EB',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0 24px',
    zIndex: 999,
  },
  leftSection: {
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
  },
  rightSection: {
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
  },
  notificationButton: {
    minWidth: '40px',
    minHeight: '40px',
    borderRadius: '50%',
    position: 'relative',
  },
});

interface TopBarProps {
  title: string;
  user?: {
    username: string;
    avatar?: string;
  };
}

const TopBar: React.FC<TopBarProps> = ({ title, user }) => {
  const classes = useStyles();

  return (
    <div className={classes.topBar}>
      <div className={classes.leftSection}>
        <h1 style={{ fontSize: '20px', fontWeight: '600', color: '#1D2129', margin: 0 }}>
          {title}
        </h1>
      </div>

      <div className={classes.rightSection}>
        {/* 通知按钮 */}
        <Tooltip content="通知" relationship="label">
          <Button
            appearance="subtle"
            icon={<Alert20Regular />}
            className={classes.notificationButton}
          >
            <Badge 
              appearance="filled" 
              color="danger" 
              size="small"
              style={{ position: 'absolute', top: '4px', right: '4px' }}
            >
              3
            </Badge>
          </Button>
        </Tooltip>

        {/* 用户头像 */}
        <Avatar
          name={user?.username || '用户'}
          image={{ src: user?.avatar }}
          size={32}
        />
      </div>
    </div>
  );
};

export default TopBar;
